<template>
	<view>
		<!-- 选择电梯品牌 -->
			<view class="hiegh">
				<picker mode="selector" :range="ElevatorBrand" range-key="brandName" @change="brandCur = $event.detail.value;getModel()">
					<view  class="choose">
						<view class="input"  :class="brandCur == 'dd' && 'ColorGray'" >{{brandCur == 'dd' ? '选择电梯品牌' : ElevatorBrand[brandCur].brandName}}</view>
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</picker>
			</view>
				
		<!-- 选择型号 -->
			<view class="hiegh">
				<picker mode="selector" :range="modelList" range-key="modelName" @change="modelCur = $event.detail.value" v-if="modelList.length > 0">
					<view  class="choose">
						<view class="input" :class="modelCur == 'dd' && 'ColorGray'">{{modelCur == 'dd' ? '选择型号' : modelList[modelCur].modelName}}</view>
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</picker>
				<view  class="choose" v-else @click="brandCur == 'dd' ? tip('请选择电梯品牌') : tip('此电梯暂无型号')">
					<view class="input ColorGray">选择型号</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		<!-- 输入故障码 -->
			<view class="hiegh">
			<view class="choose">
				<input class="input" placeholder-class="ColorGray" type="text" placeholder="输入故障码" v-model="faultNumber" />
			</view>		
			</view>	
		<!-- 注册 -->
		<!-- <view class=""> -->
			<button type="default" @click="searchd">查询</button>
		<!-- </view> -->
		
	</view>
</template>

<script>
	import fault from "@/serve/api/fault.js";
	export default {
		data() {
			return {
				brandCur:"dd",
				ElevatorBrand:[],
				modelCur:"dd",
				modelList:[],
				faultNumber:"",
			}
		},
		onLoad() {
			this.getSelectList();
		},
		methods: {
			async getSelectList(key,code){
					const res = await fault.selectElevatorBrandList({})
					this.ElevatorBrand = res.data.data
			},
			async getModel(){
				const res = await fault.selectElevatorModelList({brandId:this.ElevatorBrand[this.brandCur].brandId})
				this.modelCur = "dd"
				this.modelList = res.data.data
			},
			searchd(){
				if(this.brandCur == 'dd'){
					this.tip("请选择电梯品牌")
					return
				}else if (this.modelCur == 'dd'){
					this.tip("请选择型号")
					return
				}else if(!this.faultNumber){
					this.tip("输入故障单号")
					return
				}
				this.navRouter(`/pages/gird/faultCode/faultCodeSearch?brandId=${this.ElevatorBrand[this.brandCur].brandId}&modelId=${this.modelList[this.modelCur].modelId}&faultCode=${this.faultNumber}`)
			}
		}
	}
</script>

<style scoped>
	*{
		margin:0;
		padding: 0;
	}
	page{
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}
	view{
		line-height: normal;
	}
	
	.hiegh{
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		width: calc(100vw - 100rpx);
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		
	}
	.choose{
		flex: 1;
		display: flex;
		justify-content: space-between;
	}
	
	.input{
		font-size: 28rpx;
		width: 100%;
	}
	.ColorGray{
		color: #ADB5C5;
	}

	button{
		width: 670rpx;
		height: 104rpx;
		background-color: #017EFE;
		box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(1, 126, 254, 0.2);
		border-radius: 52rpx;
		margin: 0 auto;
		line-height: 104rpx;
		margin-top: 50rpx;
		font-size: 36rpx;
		text-align: center;
		font-weight: 400;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		outline: none;
		border: 0;
	}
</style>
